<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery.min.js"></script>
    <title>创建/添加/删除元素</title>
</head>
<body>
    <div class="text">
        内容巴拉巴拉
    </div>
    <ul>
        <li>我是原先的li</li>
    </ul>
    <script>
        
        // 添加元素：
        // 内部添加的元素，是父子关系
        // element.append('内容')内部添加,并且放在内容的【最后面】
        // .prepend()内部添加 并且放在内容的【最前面】
        // 外部添加的元素，是兄弟关系
        // .after() 外部添加，放在内容的后面
        // .before()  外部添加，放在内容的前面
        $(function(){
            var x = $("<li>我是新添加的数据</li>");
            // $("ul").append(x);
            // $("ul").prepend(x);

            var y = $('<div>我是添加在外部的数据</div>');
            // $('div').after(y);
            $('div').before(y);
        });

        // 删除元素：element.remove()删除匹配的元素本身 删除自己
        //  element.empty()删除匹配的元素集合中所有的子节点 删除包含在自己内部的所有子节点
        // element.html("")删除匹配的元素的内容

    </script>
</body>
</html>